// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
// 1.按需引入 iview 组件
import { Message, Select, Option, List, ListItem, Tag, Icon,
  Dropdown, DropdownItem, DropdownMenu, Modal, Tabs,
  TabPane, Page, Switch, Time, Divider, Button, Notice, ButtonGroup,
  Drawer, Menu, MenuItem, Row, Col, Layout, Sider, Content, Footer, ColorPicker,
  Avatar, Card, Form, FormItem, Input, InputNumber, Slider, LoadingBar, Spin, Tree,
  Carousel, CarouselItem, Timeline, TimelineItem, Poptip, CellGroup, Cell, Circle, RadioGroup, Radio,
  Badge, DatePicker, TimePicker, Cascader, Table, TableColumn, ListItemMeta, BackTop, Affix,
  Alert, Tooltip, Collapse, Checkbox, CheckboxGroup, Submenu, Breadcrumb, BreadcrumbItem, Progress } from 'view-design'
import 'view-design/dist/styles/iview.css'
// 2.引入app等必须
import App from './App'
import router from './router'
// 3.引入其他必须
import VueAxios from 'vue-axios'
import axios from 'axios'
import VueWechatTitle from 'vue-wechat-title'
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
import waterfall from 'vue-waterfall2'
// 引入懒加载
import VueLazyload from 'vue-lazyload'
// 4.引入自定义js
import lseajax from './util/api'
import lseutil from './util/util'
import lsedata from './util/data'
import qs from 'qs'
import store from './store/index'
// 导入自定义loading组件
import LOADING from './util/loading/Loading.vue'
// 导入自定义空信息组件
import EMPTY from './util/Empty.vue'
// 导入拖拽组件
import draggable from 'vuedraggable'
// 导入滚动条组件
import { HappyScroll } from 'vue-happy-scroll'
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'

// 引入高亮组件
import highlinght from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

// 自定义组件名
Vue.component('happy-scroll', HappyScroll)

Vue.prototype.qs = qs
Vue.prototype.lseajax = lseajax
Vue.prototype.lseutil = lseutil
Vue.prototype.lsedata = lsedata

// 按需引入 iview 组件
Vue.prototype.$Message = Message
Vue.prototype.$Modal = Modal
Vue.prototype.$Notice = Notice

Vue.component('Select', Select)
Vue.component('Option', Option)
Vue.component('List', List)
Vue.component('ListItem', ListItem)
Vue.component('Tag', Tag)
Vue.component('Icon', Icon)
Vue.component('Dropdown', Dropdown)
Vue.component('DropdownItem', DropdownItem)
Vue.component('DropdownMenu', DropdownMenu)
Vue.component('Tabs', Tabs)
Vue.component('TabPane', TabPane)
Vue.component('Modal', Modal)
Vue.component('Page', Page)
Vue.component('SwitchIview', Switch)
Vue.component('Time', Time)
Vue.component('Divider', Divider)
Vue.component('Button', Button)
Vue.component('Drawer', Drawer)
Vue.component('Menu', Menu)
Vue.component('Submenu', Submenu)
Vue.component('MenuItem', MenuItem)
Vue.component('Row', Row)
Vue.component('Col', Col)
Vue.component('Layout', Layout)
Vue.component('Sider', Sider)
Vue.component('Content', Content)
Vue.component('Footer', Footer)
Vue.component('Avatar', Avatar)
Vue.component('Card', Card)
Vue.component('Form', Form)
Vue.component('FormItem', FormItem)
Vue.component('Input', Input)
Vue.component('InputNumber', InputNumber)
Vue.component('Slider', Slider)
Vue.component('Spin', Spin)
Vue.component('Carousel', Carousel)
Vue.component('CarouselItem', CarouselItem)
Vue.component('Timeline', Timeline)
Vue.component('TimelineItem', TimelineItem)
Vue.component('Poptip', Poptip)
Vue.component('CellGroup', CellGroup)
Vue.component('Cell', Cell)
Vue.component('CircleIview', Circle)
Vue.component('Badge', Badge)
Vue.component('DatePicker', DatePicker)
Vue.component('TimePicker', TimePicker)
Vue.component('Cascader', Cascader)
Vue.component('Table', Table)
Vue.component('TableColumn', TableColumn)
Vue.component('ListItemMeta', ListItemMeta)
Vue.component('BackTop', BackTop)
Vue.component('Alert', Alert)
Vue.component('Tooltip', Tooltip)
Vue.component('Collapse', Collapse)
Vue.component('CollapsePanel', Collapse['Panel'])
Vue.component('Checkbox', Checkbox)
Vue.component('CheckboxGroup', CheckboxGroup)
Vue.component('Breadcrumb', Breadcrumb)
Vue.component('BreadcrumbItem', BreadcrumbItem)
Vue.component('Progress', Progress)
Vue.component('Tree', Tree)
Vue.component('ButtonGroup', ButtonGroup)
Vue.component('RadioGroup', RadioGroup)
Vue.component('Radio', Radio)
Vue.component('Affix', Affix)
Vue.component('ColorPicker', ColorPicker)
// 自定义loading组件
Vue.component('loading', LOADING)
// 自定义empty组件
Vue.component('empty', EMPTY)
// 拖拽组件
Vue.component('draggable', draggable)

// 图片放大组件配置
let previewOptions = {
  fullscreenEl: false, // 控制是否显示右上角全屏按钮
  closeEl: true, // 控制是否显示右上角关闭按钮
  tapToClose: true, // 点击滑动区域应关闭图库
  shareEl: false, // 控制是否显示分享按钮
  zoomEl: true, // 控制是否显示放大缩小按钮
  counterEl: true, // 控制是否显示左上角图片数量按钮
  tapToToggleControls: true, // 点击应切换控件的可见性
  clickToCloseNonZoomable: true, // 点击图片应关闭图库，仅当图像小于视口的大小时
  indexIndicatorSep: ' / '// 图片数量的分隔符
}

Vue.use(Vuex)
// 查看大图
Vue.use(preview, previewOptions)
// 瀑布流
Vue.use(waterfall)
Vue.use(VueWechatTitle)
Vue.use(VueAxios, axios)
// 图片懒加载
Vue.use(VueLazyload, {
  loading: require('@/assets/loading.gif'),
  error: require('@/assets/img-404.png'),
  dispatchEvent: true,
  attempt: 1
})

// 高亮配置
Vue.directive('highlight', {
  deep: true,
  bind: (el) => {
    let blocks = el.querySelectorAll('pre code')
    blocks.forEach(block => {
      highlinght.highlightBlock(block)
    })
  },
  update (el, binding, vnode, oldVnode) {
    console.log(binding)
    let blocks = el.querySelectorAll('pre code')
    blocks.forEach(block => {
      console.log(block)
      highlinght.highlightBlock(block)
    })
  }
})

// 设置 路由加载loading bar
router.beforeEach((to, from, next) => {
  LoadingBar.start()
  next()
})

router.afterEach(route => {
  LoadingBar.finish()
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
